<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    td{
      width: 100px;
    }
  </style>
</head>
<body>
<table border="1">
  <caption>个人信息</caption>
 <tr><td>照片:</td><td id="pic_id"></td></tr>
 <tr><td>姓名:</td><td id="name_id"></td></tr>
 <tr><td>年龄:</td><td id="age_id"></td></tr>
 <tr><td>好友:</td><td id="friends_id"></td></tr>
</table>
<input type="button" value="加载数据" onclick="f()">
<script>
  function f() {
    //创建对象
    let person={pic:"../1.jpg",name:"蔡徐坤",age:"23",froends:["吴亦凡","罗志祥","范丞丞"]}
    //得到td
    let picTd=document.querySelector("#pic_id")
    let nameTd=document.querySelector("#name_id")
    let ageTd=document.querySelector("#age_id")
    let friendsTd=document.querySelector("#friends_id")
    //把person对象赋值给td
    nameTd.innerText=person.name
    ageTd.innerText=person.age
    //创建图片标签添加到td
    let img=document.createElement("img")
    img.src=person.pic
    img.width=100
    //把img添加的picTd中
    picTd.append(img)
    //创建一个无序列表
    let ul=document.createElement("ul")
    //遍历好友名字
    for (let f of person.froends) {
      let li=document.createElement("li")
      li.innerText=f
      ul.append(li)
    }
    friendsTd.append(ul)
  }
</script>
</body>
</html>